<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        li {
            font: 22px/30px 'simsun';
            cursor: pointer;
            margin: 5px;
        }
    </style>
    <script src="./jquery-1.11.1.js"></script>
    <!-- <script>
        $(function() {
            fn()

            $('ul li').mouseover(function() {
                fn()

                $(this).css('background', 'red')
            })

            function fn() {
                $('ul li:odd').css('background', 'yellow')
                $('ul li:even').css('background', 'orange')
            }
        })
    </script> -->
    <script>
        $(function() {
            // fn()
            $('ul li:odd').css('background', 'red')
            $('ul li:even').css('background', 'orange')
            $('ul li').mouseover(function() {
                $(this).css('background', 'purple')
            })
            $('ul li:odd').mouseout(function() {
                $(this).css('background', 'red')
            })
            $('ul li:even').mouseout(function() {
                $(this).css('background', 'orange')
            })
        })
    </script>
</head>

<body>
    <ul>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
    </ul>
</body>

</html>